JavaScript'i valikulise aheldamise süvaülevaade: turvalised omadustele juurdepääsu mustrid

JavaScript, kaasaegse veebiarenduse nurgakivi, seab arendajatele sageli väljakutse keeruliste objektistruktuuride navigeerimisel. Üks levinud lõks on katse pääseda juurde omadustele, mis ei pruugi eksisteerida, mis viib kardetud TypeError: Cannot read properties of undefined (reading '...') vigadeni. Enne valikulise aheldamise tulekut tuginesid arendajad nende vigade vältimiseks sõnaohtratele ja mõnikord kohmakatele tingimuslikele kontrollidele. Nüüd pakub valikuline aheldamine elegantsemat ja lühemat lahendust, parandades koodi loetavust ja hooldatavust. See põhjalik juhend süveneb valikulise aheldamise peensustesse, demonstreerides selle kasutamist, eeliseid ja täpsemaid rakendusi.

Probleemi mõistmine: sügava omadustele juurdepääsu ohud

Kujutage ette stsenaariumi, kus töötate API-st hangitud kasutajaprofiili objektiga. Sellel objektil võib olla pesastatud struktuur, näiteks user.address.city.name. Siiski pole mingit garantiid, et kõik need omadused on alati olemas. Kui user.address on undefined või null, põhjustab katse pääseda juurde user.address.city-le käitusvea. See on levinud probleem, eriti välistest allikatest pärinevate andmete või kasutajate loodud sisu puhul.

Traditsiooniliselt kasutasid arendajad mitmeid tingimuslikke kontrolle, et veenduda iga omaduse olemasolus enne järgmisele juurdepääsu. See lähenemine, kuigi toimiv, võib kiiresti muutuda kohmakaks ja raskesti loetavaks, eriti sügavalt pesastatud objektide puhul.

Näide (ilma valikulise aheldamiseta):

            
const user = {
  address: {
    city: {
      name: 'London'
    }
  }
};

let cityName = 'Unknown';

if (user && user.address && user.address.city && user.address.city.name) {
  cityName = user.address.city.name;
}

console.log(cityName); // Väljund: London

const user2 = {}; // Tühi kasutaja objekt

let cityName2 = 'Unknown';

if (user2 && user2.address && user2.address.city && user2.address.city.name) {
  cityName2 = user2.address.city.name;
}

console.log(cityName2); // Väljund: Unknown

            

              
                Copy
              
            
          

Nagu näete, on pesastatud if-laused sõnaohtrad ja korduvad. Seda koodi on raske lugeda ja hooldada. Valikuline aheldamine pakub palju puhtamat lahendust.

Valikulise aheldamise (?. ) tutvustus

Valikuline aheldamine toob sisse uue süntaksi, ?., mis võimaldab turvaliselt juurde pääseda pesastatud objekti omadustele. See toimib avaldist lühistades, kui valikuline omadus on nullish (null või undefined). Vea viskamise asemel tagastab avaldis undefined.

Näide (valikulise aheldamisega):

            
const user = {
  address: {
    city: {
      name: 'London'
    }
  }
};

const cityName = user?.address?.city?.name;

console.log(cityName); // Väljund: London

const user2 = {}; // Tühi kasutaja objekt

const cityName2 = user2?.address?.city?.name;

console.log(cityName2); // Väljund: undefined

            

              
                Copy
              
            
          

Pange tähele, kui palju puhtamaks ja lühemaks kood valikulise aheldamisega muutub. Operaator ?. käsitleb sujuvalt juhtumit, kus mõni ahela omadustest on nullish, vältides vigu ja tagastades undefined.

Kuidas valikuline aheldamine töötab

Operaator ?. töötab järgmiselt:

• Kui operaatorist ?. vasakul asuv omadus on olemas, jätkub avaldise hindamine tavapäraselt.
• Kui operaatorist ?. vasakul asuv omadus on null või undefined, siis avaldis lühistatakse ja tagastatakse undefined.
• Ülejäänud avaldist ei hinnata.

See lühistav käitumine on vigade vältimiseks ja koodi lihtsustamiseks ülioluline. See võimaldab teil turvaliselt juurde pääseda sügavalt pesastatud omadustele, ilma et peaksite kirjutama arvukalt tingimuslikke kontrolle.

Valikulise aheldamise kasutamise eelised

• Parem koodi loetavus: Valikuline aheldamine vähendab oluliselt teie koodi sõnaohtrust, muutes selle lugemise ja mõistmise lihtsamaks.
• Vähendatud veahaldus: See välistab vajaduse selgesõnaliste null-kontrollide järele, vähendades käitusvigade riski.
• Lihtsustatud koodi hooldus: Puhtamat koodi on lihtsam hooldada ja refaktoreerida.
• Lühike süntaks: Operaator ?. pakub kompaktset ja elegantset viisi pesastatud omadustele juurdepääsuks.

Valikulise aheldamise kasutusjuhud

Valikulist aheldamist saab rakendada erinevates stsenaariumides, sealhulgas:

• Pesastatud objekti omadustele juurdepääs: See on kõige levinum kasutusjuht, nagu on näidatud eelmistes näidetes.
• Meetodite kutsumine, mida ei pruugi olemas olla: Saate kasutada valikulist aheldamist, et turvaliselt kutsuda meetodeid objektidel, millel neid ei pruugi olla.
• Massiivi elementidele juurdepääs, mis võivad olla piiridest väljas: Kuigi vähem levinud, saate valikulist aheldamist kasutada massiiviindeksitega.

Meetodite kutsumine valikulise aheldamisega

Saate kasutada valikulist aheldamist, et turvaliselt kutsuda meetodeid, mis ei pruugi objektil eksisteerida. See on eriti kasulik, kui tegelete objektidega, millel võivad olla erinevad liidesed, või kui töötate dünaamiliselt genereeritud objektidega.

Näide:

            
const user = {
  profile: {
    getName: function() {
      return 'John Doe';
    }
  }
};

const userName = user?.profile?.getName?.();

console.log(userName); // Väljund: John Doe

const user2 = {};

const userName2 = user2?.profile?.getName?.();

console.log(userName2); // Väljund: undefined

            

              
                Copy
              
            
          

Selles näites ei pruugi getName meetod user objektil eksisteerida. Kasutades valikulist aheldamist, saame meetodit turvaliselt kutsuda ilma viga põhjustamata. Kui user.profile või user.profile.getName on nullish, lühistatakse avaldis ja tagastatakse undefined.

Massiivi elementidele juurdepääs valikulise aheldamisega

Kuigi vähem levinud, saate valikulist aheldamist kasutada ka massiivi elementidele juurdepääsuks, mis võivad olla piiridest väljas. Siiski on oluline märkida, et valikuline aheldamine töötab ainult nullish väärtustega (null või undefined), mitte piiridest väljas olevate massiiviindeksitega. Seetõttu on tavaliselt parem sel eesmärgil kasutada massiivi pikkuse kontrolle.

Näide:

            
const myArray = [1, 2, 3];

const element = myArray?.[5];

console.log(element); // Väljund: undefined (sest myArray[5] on undefined)

const myArray2 = [1, null, 3];
const element2 = myArray2?.[1];

console.log(element2); // Väljund: null

            

              
                Copy
              
            
          

Esimeses näites on myArray[5] undefined, kuna see on piiridest väljas. Valikulise aheldamise operaator tagastab korrektselt undefined. Teises näites on elemendi indeksil 1 väärtuseks selgesõnaliselt seatud null ja valikuline aheldamine tagastab samuti korrektselt nulli.

Valikulise aheldamise kombineerimine Nullish Coalescing operaatoriga (??)

Kuigi valikuline aheldamine aitab vigu vältida, tagastades undefined, kui omadus on nullish, võiksite sellistel juhtudel pakkuda vaikeväärtust. Siin tuleb appi nullish coalescing operaator (??). Nullish coalescing operaator tagastab oma parempoolse operandi, kui selle vasakpoolne operand on null või undefined, ja vastasel juhul tagastab see oma vasakpoolse operandi.

Näide:

            
const user = {};

const cityName = user?.address?.city?.name ?? 'Unknown City';

console.log(cityName); // Väljund: Unknown City

const user2 = {
  address: {
    city: {
      name: 'London'
    }
  }
};

const cityName2 = user2?.address?.city?.name ?? 'Unknown City';

console.log(cityName2); // Väljund: London

            

              
                Copy
              
            
          

Selles näites, kui user?.address?.city?.name on nullish, tagastab ?? operaator 'Unknown City'. Vastasel juhul tagastab see user?.address?.city?.name väärtuse. See valikulise aheldamise ja nullish coalescing operaatori kombinatsioon pakub võimsat ja lühikest viisi potentsiaalselt puuduvate omaduste käsitlemiseks ja vaikeväärtuste pakkumiseks.

Veebilehitsejate ühilduvus

Valikuline aheldamine on JavaScripti suhteliselt hiljutine lisandus, seega on oluline arvestada veebilehitsejate ühilduvusega. Enamik kaasaegseid veebilehitsejaid toetab valikulist aheldamist, sealhulgas:

• Chrome (versioon 80 ja uuemad)
• Firefox (versioon 74 ja uuemad)
• Safari (versioon 13.1 ja uuemad)
• Edge (versioon 80 ja uuemad)
• Node.js (versioon 14 ja uuemad)

Kui teil on vaja toetada vanemaid veebilehitsejaid, peate oma koodi ühilduvasse JavaScripti versiooni teisendamiseks kasutama transpilerit nagu Babel. Babel pakub valikulise aheldamise pistikprogrammi, mis võimaldab teil kasutada ?. operaatorit vanemates veebilehitsejates.

Levinud vead, mida vältida

• Valikulise aheldamise liigne kasutamine: Kuigi valikuline aheldamine on võimas tööriist, on oluline seda kasutada läbimõeldult. Ärge kasutage seda oma andmestruktuuri või loogika põhiprobleemide varjamiseks. Mõnikord on parem parandada aluseks olev probleem, kui tugineda vigade vältimiseks valikulisele aheldamisele.
• Võimalike vigade ignoreerimine: Valikuline aheldamine hoiab ära TypeError erandid, kui omadused on nullish, kuid see ei kõrvalda kõiki võimalikke vigu. Näiteks, kui ootate arvu, kuid saate undefined, võite siiski kohata ootamatut käitumist. Veenduge, et käsitlete neid juhtumeid asjakohaselt.
• Nullish vs. Falsy väärtuste valesti mõistmine: Pidage meeles, et valikuline aheldamine kontrollib ainult null ja undefined väärtusi, mitte teisi falsy väärtusi nagu 0, '', false või NaN. Kui peate neid juhtumeid käsitlema, peate kasutama täiendavaid kontrolle või loogilist VÕI operaatorit (||).

Täpsemad kasutusjuhud ja kaalutlused

Töötamine dünaamiliste võtmetega

Valikuline aheldamine töötab sujuvalt dünaamiliste võtmetega, võimaldades teil pääseda juurde omadustele muutujate või avaldiste abil. See on eriti kasulik, kui töötate andmestruktuuridega, kus omaduste nimed pole ette teada.

Näide:

            
const user = {
  profile: {
    'first-name': 'John',
    'last-name': 'Doe'
  }
};

const key = 'first-name';

const firstName = user?.profile?.[key];

console.log(firstName); // Väljund: John

const invalidKey = 'middle-name';

const middleName = user?.profile?.[invalidKey];

console.log(middleName); // Väljund: undefined

            

              
                Copy
              
            
          

Selles näites kasutame muutujat key, et dünaamiliselt pääseda juurde user.profile objekti 'first-name' omadusele. Valikuline aheldamine tagab, et viga ei visata, kui user või profile objektid on nullish, või kui dünaamilist võtit ei eksisteeri.

Valikuline aheldamine Reacti komponentides

Valikuline aheldamine on eriti väärtuslik Reacti komponentides, kus töötate sageli andmetega, mis võivad olla asünkroonselt hangitud või millel võib olla keeruline pesastatud struktuur. Valikulise aheldamise kasutamine võib vigu vältida ja teie komponendi loogikat lihtsustada.

Näide:

            
function UserProfile(props) {
  const { user } = props;

  return (
    

      
{user?.name ?? 'Unknown User'}
      
City: {user?.address?.city ?? 'Unknown City'}
    
  );
}

// Näidiskasutus


// Väljund:
// 
Alice
// 
City: Paris


// Väljund:
// 
Bob
// 
City: Unknown City


// Väljund:
// 
Unknown User
// 
City: Unknown City

            

              
                Copy
              
            
          

Selles näites kasutame valikulist aheldamist user objekti name ja address.city omadustele juurdepääsuks. Kui user objekt on null või kui address või city omadused puuduvad, kuvab komponent vea viskamise asemel vaikeväärtusi. Nullish coalescing operaatori (??) kasutamine suurendab veelgi komponendi vastupidavust, pakkudes selgeid ja prognoositavaid tagavaraväärtusi.

Veahalduse strateegiad

Kuigi valikuline aheldamine väldib teatud tüüpi vigu, on siiski oluline omada põhjalikku veahalduse strateegiat. Kaaluge try...catch plokkide kasutamist ootamatute vigade käsitlemiseks ja vigade logimist, et aidata teil oma koodi siluda. Samuti kasutage tööriistu nagu Sentry või Rollbar, et jälgida ja monitoorida vigu oma tootmiskeskkonnas.

Näide:

            
try {
  const userName = user?.profile?.getName?.();
  console.log(userName);
} catch (error) {
  console.error('An error occurred:', error);
  // Saada viga logimisteenusesse nagu Sentry
  // Sentry.captureException(error);
}

            

              
                Copy
              
            
          

Kokkuvõte

JavaScript'i valikulise aheldamise operaator (?.) on võimas ja väärtuslik tööriist turvalisema, puhtama ja paremini hooldatava koodi kirjutamiseks. See võimaldab teil pääseda juurde pesastatud objekti omadustele ilma sõnaohtra tingimusliku kontrolli kirjutamiseta, vältides käitusvigu ja parandades koodi loetavust. Kombineerides valikulist aheldamist nullish coalescing operaatoriga (??), saate sujuvalt käsitleda potentsiaalselt puuduvaid omadusi ja pakkuda vaikeväärtusi. Globaalselt mõtleva arendajana võimaldab valikulise aheldamise omaksvõtmine ehitada vastupidavamaid ja paindlikumaid rakendusi, mis suudavad toime tulla mitmekesiste andmestruktuuride ja kasutajasisenditega üle kogu maailma. Ärge unustage arvestada veebilehitsejate ühilduvusega ja vältida levinud vigu, et maksimeerida selle võimsa funktsiooni eeliseid.

Valikulise aheldamise meisterlik valdamine võimaldab teil oluliselt parandada oma JavaScripti koodi kvaliteeti ja täiustada oma veebirakenduste kasutajakogemust, olenemata sellest, kus teie kasutajad asuvad.